<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    div {
        width: 800px;
        height: 800px;
        margin: 0 auto;
        margin-top: 200px;
        text-align: center;
    }

    .hour,
    .minute,
    .second {
        display: inline-block;
        width: 50px;
        height: 50px;
        background-color: black;
        color: white;
        line-height: 40px;
        padding: 40px;
    }
</style>
<body>
<div>
    <span class="hour">1</span>
    <span class="minute">2</span>
    <span class="second">3</span>
</div>
<script>

    //1、获取元素
    var hour = document.querySelector('.hour');//小时的黑色盒子
    var minute = document.querySelector('.minute');//分钟的黑色盒子
    var second = document.querySelector('.second');//秒数的黑色盒子
    var inputTime = +new Date('2023-3-24 15:30:00');//定义结束的时间
    countDown();                         //先调用一次防止第一次刷新页面有空白
    var i = 0;
    var timer = null;                     //定义一个全局变量方便清除定时器
    //2、开启定时器
    timer = setInterval(countDown, 1000);         //每隔一秒调用一次
    function countDown(time) {
        var nowTime = +new Date();  //返回的是当前时间总的毫秒数
        var times = (inputTime - nowTime) / 1000;     //times 是剩余时间总的秒数
        var h = parseInt(times / 60 / 60 % 24);      //计算小时
        h = h < 10 ? '0' + h : h;
        hour.innerHTML = h;
        var m = parseInt(times / 60 % 60);         //计算分钟
        m = m < 10 ? '0' + m : m;
        minute.innerHTML = m;
        var s = parseInt(times % 60);            //计算秒数
        s = s < 10 ? '0' + s : s;
        second.innerHTML = s;
        console.log(111);
        if (s == '00' && h == '00' && m == '00') {
            second.innerHTML = '00';
            clearInterval(timer);

            setTimeout(function () {         //添加一个定时器，使秒出现 00 时 再弹出提示框
                alert('时间到了');
            }, 1);                           //1ms
        }
    }
</script>
</body>
</html>